<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>

        <style>
            /* ::before
               创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容   
            */
            a::before {
                content:"☆"
            }

            /* ::after
               创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容
            */
            a::after {
                content:"❤"
            }

            /* ::selection
               应用于文档中被用户高亮的部分（使用鼠标圈选的部分） 
            */
            .box {
                width:400px;
                height:400px;
                border: 1px solid black;
            }
            .box::selection {
                /* 背景颜色 */
                background-color: springgreen;
                color: deeppink;
            }

            /* ::first-letter会选中某元素中(必须是块级元素）第一行的第一个字母
               ::first-line会选中某元素中（必须是块级元素）第一行全部文字
            */
            .box::first-letter {
                font-size: 50px;
            }
            .box::first-line {
                /* 添加下划线 */
                text-decoration: underline;
            }

        </style>
    </head>
    <body>
        <p>
            <a href="">我是超级链接</a>
        </p>
        <p>
            <a href="">我是超级链接</a>
        </p>
        <p>
            <a href="">我是超级链接</a>
        </p>

        <div class="box">
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </div>
    </body>
</html>